<template>
 <div class="list_footer">
    <a href="#" :class="['icon_play',{'togglePlay':isActive}]" @click="play($event)"></a>
    <audio src="http://222.184.110.79/amobile.music.tc.qq.com/C400002krvKI4Jgvq9.m4a?guid=2365009875&vkey=2257FCC1FAF6480C28806F7BDBC1EE725295E6E47BA218A452881C350894F0B6166FDD27C2D9CB53837A48AF41762E05FBFE38C84EB61144&uin=0&fromtag=66">
      
    </audio>
 </div>
</template>

<script>
 export default {
   data () {
     return {
        isActive:false
     }
   },
   methods:{
     play(e){
       console.log(e.currentTarget)
       this.isActive =!this.isActive
     }
   },
   components: {

   }
 }
</script>

<style >
.list_footer{
    position: fixed;
    height: 50Px;
    bottom: 0Px;
    background-color: #000;
    width: 100%;
    z-index: 4
}
  [class^="icon"] {
     background: url("~@src/player.png") no-repeat;
  }
.icon_play {
    width: 30Px;
    height: 28Px;
    display: inline-block;
   
    position: absolute;
    top: 9Px;
    left: 37Px;
 }
  .togglePlay{
   background-position: -30Px 0Px;
  }
</style>

